import React, { Component } from "react";
import axios from "axios";
import AddQuestion from './addQuestion.jsx'
import {
  Modal,
  Input,
  Card,
  Radio,
  notification,
  Button,
  Icon,
  Select
} from "antd";
const Option = Select.Option;
class AddQuestionnaire extends Component {
  constructor(props) {
    super(props);
    this.setQuestionnaire = this.setQuestionnaire.bind(this);
    this.showModal = this.showModal.bind(this);
    this.handleOk = this.handleOk.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.showQuestionnaireChoiceQuestion = this.showQuestionnaireChoiceQuestion.bind(
      this
    );
    this.showQuestionnaireCompletion = this.showQuestionnaireCompletion.bind(
      this
    );
    this.getRadioQuestionOptions = this.getRadioQuestionOptions.bind(this);
    this.getMultiselectQuestionOptions = this.getMultiselectQuestionOptions.bind(
      this
    );
    this.getOptions = this.getOptions.bind(this);
    // 设置 initial state
    this.state = {
      qid: {},
      titilevisible: false,
      title: "",
      questionnaire: 1
    };
  }
  setQuestionnaire(val) {
    this.setState({ questionnaire: val });
  }
  showModal() {
    this.setState({ titilevisible: true });
  }
  handleOk() {
    var _this = this;
    var title = $("#title").val();
    axios
      .post(
        "http://localhost:7952/api/Questionnaire/CreateQuestionnaire?title=" +
          title
      )
      .then(function(response) {
        if (response.data != null) {
          _this.setState({
            titilevisible: false,
            title: response.data.Title,
            qid: response.data.Qid
          });
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }
  handleCancel() {
    this.setState({ titilevisible: false });
    window.location.href = "http://localhost:8080/#/AdminHome/Welcome";
    notification.warn({
      placement: "bottomRight",
      message: "操作提示",
      description: "您取消了创建新的问卷！"
    });
  }
  componentDidMount() {
    this.showModal();
  }
  getOptions(options) {
    var count = 1;
    return options.map(o => {
      return (
        <Radio
        key={o.OptionId}
          style={{
            display: "block"
          }}
          key={o.OptionId}
          disabled={true}
        >
          {o.OptionContent}
        </Radio>
      );
    });
  }
  getRadioQuestionOptions(questionCount, title, options,questionId) {
    var flag = false;
    return (
      <Card
        key={questionId}
        title={"题目" + questionCount + "：" + title}
        style={{
          display: "inline-block",
          width: 300,
          margin: 5
        }}
      >
        {this.getOptions(options)}
        <h5
          style={{
            float: "right"
          }}
        >
          <span className="label label-info">单选</span>
        </h5>
      </Card>
    );
  }
  getMultiselectQuestionOptions(questionCount, title, options,questionId) {
    var flag = false;
    return (
      <Card
      key={questionId}
        title={"题目" + questionCount + "：" + title}
        style={{
          display: "inline-block",
          width: 300,
          margin: 5
        }}
      >
        {this.getOptions(options)}
        <h5
          style={{
            float: "right"
          }}
        >
          <span className="label label-warning">多选</span>
        </h5>
      </Card>
    );
  }
  showQuestionnaireChoiceQuestion() {
    if (this.state.questionnaire != 1) {
      var questionCount = 1;
      return this.state.questionnaire.ChoiceQuestions.map(c => {
        if (c.Type == true) {
          return this.getRadioQuestionOptions(
            questionCount++,
            c.Title,
            c.Options,
            c.QuestionId
          );
        } else {
          return this.getMultiselectQuestionOptions(
            questionCount++,
            c.Title,
            c.Options,
            c.QuestionId
          );
        }
      });
    }
  }
  showQuestionnaireCompletion() {
    if (this.state.questionnaire != 1) {
      var questionCount = 1;
      return this.state.questionnaire.Completions.map(c => {
        return (
          <Card
            key={c.CompletionId}
            title={"填空题"}
            style={{
              display: "inline-block",
              width: 300,
              margin: 5
            }}
          >
            <p>{c.Title}？</p>
            <h5
              style={{
                float: "right"
              }}
            >
              <span className="label label-info">填空题</span>
            </h5>
          </Card>
        );
      });
    }
  }

  render() {
    return (
      <div className="content-wrapper">
        <section
          className="content"
          style={{
            minHeight: 650
          }}
        >
          <div>
            <section className="content-header">
              <h1>
                新增问卷
                <small>欢迎使用</small>
              </h1>
              <ol className="breadcrumb">
                <li>
                  <a href="#">
                    <i className="fa fa-dashboard" />
                    Stage
                  </a>
                </li>
                <li>
                  <a href="#">后台管理</a>
                </li>
                <li className="active">新增问卷</li>
              </ol>
            </section>
            <br />
            <div
              className="box"
              style={{
                minHeight: 530
              }}
            >
              <div className="box-header with-border">
                <h3 className="box-title">新增问卷</h3>
                <div className="box-tools pull-right">
                  <span className="label label-primary">概览</span>
                </div>
              </div>
              <div className="box-body">
                <div id="questionnaire-content">
                  <h2
                    style={{
                      color: "red",
                      textAlign: "center"
                    }}
                  >
                    {this.state.title}
                  </h2>
                  <br />
                  <br /> {this.showQuestionnaireChoiceQuestion()}
                  {this.showQuestionnaireCompletion()}

                </div>
                  <AddQuestion 
                    qid={this.state.qid} 
                    questionnaire={this.state.questionnaire} 
                    setQuestionnaire={this.setQuestionnaire.bind(this)}
                    />
              </div>
              <div className="box-footer">
                <div>
                  <Modal
                    title="添加问卷"
                    visible={this.state.titilevisible}
                    onOk={this.handleOk}
                    confirmLoading={this.state.confirmLoading}
                    onCancel={this.handleCancel}
                  >
                    <Input placeholder="请输入问卷名称" id="title" />
                  </Modal>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default AddQuestionnaire;
